<template>
	<view class="consumption-records-container">
		<!-- 蓝色背景区域 -->
		<view class="blue-background">
			
		</view>

		<!-- 消费记录列表 - 重叠在蓝色背景上 -->
		<view class="records-card">
			<view class="records-list">
				<view class="record-item" v-for="(record, index) in consumptionRecords" :key="index">
					<view class="record-left">
						<text class="service-name">{{ record.serviceName }}</text>
						<text class="record-time">{{ record.dateTime }}</text>
					</view>
					<view class="record-right">
						<text class="amount">{{ record.amount }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				consumptionRecords: [
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					},
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					},
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					},
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					},
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					},
					{
						serviceName: '大美汽车维修店-洗车',
						dateTime: '2023.3.11 11:09',
						amount: '-50元'
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.consumption-records-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

/* 蓝色背景区域 */
.blue-background {
	background: #1F73F1;
	height: 160rpx;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

/* 页面标题 */
.page-title {
	position: absolute;
	top: 40rpx;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}

.title-text {
	color: white;
	font-size: 42rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}



/* 消费记录卡片 - 重叠在蓝色背景上 */
.records-card {
	background: white;
	margin: -130rpx 20rpx 20rpx 20rpx;
	border-radius: 24rpx 24rpx 0 0;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	overflow: hidden;
	position: relative;
	z-index: 2;
	backdrop-filter: blur(10rpx);
}

.records-list {
	padding: 0;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
	min-height: 130rpx;
	transition: all 0.3s ease;
	position: relative;
}

.record-item:hover {
	background-color: #fafafa;
}

.record-item:last-child {
	border-bottom: none;
}

.record-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6rpx;
}

.service-name {
	font-size: 30rpx;
	color: #2c3e50;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 4rpx;
}

.record-time {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.4;
	font-weight: 400;
}

.record-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 120rpx;
}

.amount {
	font-size: 32rpx;
	color: #e74c3c;
	font-weight: 700;
	text-align: right;
	letter-spacing: 1rpx;
}
</style>
